<template>
  <div class="box">
    <div style="margin-bottom: 20px;width: 100%;">
      <el-button type="primary" v-has>协议管理</el-button>
    </div>
    <div id="" style="display: flex;flex-direction: column;align-items: center;">
      <div id="">
        <img src="../../../assets/login/file.png" alt="" />
      </div>
      <el-button type="primary" @click="open">开始迁移</el-button>
    </div>
    <div id="zhezao" v-if="progressVisible">
      <div id="">
        <progress-bar :options="options" :value="number" />
        <div id="" style="color: red;">
          {{number==100?'迁移完成':'迁移中...'}}
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        options: {
          text: {
            color: '#FFFFFF',
            shadowEnable: true,
            shadowColor: '#000000',
            fontSize: 14,
            fontFamily: 'Helvetica',
            dynamicPosition: false,
            hideText: false
          },
          progress: {
            color: '#2dbd2d',
            backgroundColor: '#333333',
            inverted: false
          },
          layout: {
            height: 35,
            width: 140,
            verticalTextAlign: 61,
            horizontalTextAlign: 43,
            zeroOffset: 0,
            strokeWidth: 30,
            progressPadding: 0,
            type: 'line'
          }
        },
        progressVisible: false,
        number: 0
      }
    },
    methods: {
      open() {
        this.progressVisible = true
        let timer = setInterval(() => {
          if (this.number >= 99) {
            clearInterval(timer)
            this.$message({
              type: 'success',
              message: '迁移成功'
            })
            setTimeout(() => {
              this.progressVisible = false
              this.number = 0
            }, 500)
          }
          this.number++
        }, 20)
      }
    }
  };
</script>

<style lang="scss" scoped>
  .box {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 30px;
  }

  #zhezao {
    position: fixed;
    top: 0;
    left: 0;
    background-color: rgba(127, 127, 127, 0.6);
    width: 100%;
    height: 100%;
    z-index: 10000;
    display: flex;
    justify-content: center;
    align-items: center;
  }
</style>
